<template>
  <div class="base-block">
    <k-toolbar>
      <el-button type="primary" @click="onClickCreate(0)">创建活动</el-button>
    </k-toolbar>
    <k-table v-bind="tableState" v-on="tableEvent">
      <!-- banner -->
      <template #main_banner_url="{ row }">
        <el-image :src="row.main_banner_url" class="banner-url" alt="cover" />
      </template>
      <template #activity_id="{ row }">
        {{ row.activity_id || '--' }}
      </template>
      <!-- 活动时间 -->
      <template #time="{ row }">
        {{ dayjs.unix(row.begin_time).format('YYYY/MM/DD HH:mm:ss') }}至{{ dayjs.unix(row.end_time).format('YYYY/MM/DD HH:mm:ss') }}
      </template>
      <!-- 活动状态 -->
      <template #status="{ row }">
        <div :class="`status status-${row.status}`">{{ activityStatusMaps[row.status] }}</div>
      </template>
      <template #actions="{ row }">
        <el-link type="primary" @click="onClickCreate(1, row)">编辑</el-link>
        <el-link type="danger" @click="onClickDel(row)">删除</el-link>
      </template>
    </k-table>
  </div>
  <CreateBannerDrawer ref="CreateBannerDrawerRef" @submit="methods.onSearch" />
</template>

<script setup lang="ts">
import { defineComponent, ref } from 'vue';
import { ElMessage } from 'element-plus';
import dayjs from 'dayjs';
import { baseConfirm } from '@crud/index';
import { activityStatusMaps, useTableListActivity } from '../hooks/use-table';
import { activityRemove } from '@/api/crm-kgj/activity';
import CreateBannerDrawer from './create-banner-drawer.vue';
defineComponent({ name: 'JuejinBanner' }); // props

const { tableState, tableEvent, ...methods } = useTableListActivity();
// 删除
const onClickDel = async(row: any) => {
  // if (tableState.value.data.length === 1) return ElMessage.error('至少需要保留一个banner');
  if (row.status === 1) await baseConfirm({ type: 'none', title: '删除', message: '当前为上架状态，请下架后进行操作' });
  else {
    await baseConfirm({ type: 'none', title: '删除', message: '删除后将无法复原，确定删除？' });
    const res = await activityRemove(row.id);
    if (!res.err) {
      ElMessage.success('删除成功');
      methods.onSearch();
    }
  }
};
// 创建活动
const CreateBannerDrawerRef = ref();
const onClickCreate = (mode: number, row?: any) => {
  CreateBannerDrawerRef.value.show(mode, row);
};
</script>

<style lang="scss" scoped>
.banner-url {
  width: 154px;
  height: 59px;
}

.status {
  color: #909399;

  &.status-1 {
    color: #67C23A;
  }

  &.status-3 {
    color: #E6A23C;
  }
}
</style>
